<template>
  <div>
    <el-card shadow="never">
      <div v-if="userInfo" class="info">
        <img :src="userInfo.avatar" alt="" height="100" width="100" style="border-radius:50%;">
        <div class="username">{{ userInfo.nickName }}</div>
        <div class="info" style="margin-top:20px">
          <el-button icon="el-icon-user" type="text" @click="$router.push('/PersonCenter')">
            个人中心
          </el-button>
          <!-- <el-button icon="el-icon-bell" type="text" @click="$router.push('/MessageList')">
            消息列表
          </el-button> -->
          <el-divider>
            <span style="color:#cdcdcd;font-size:12px">投票管理</span>
          </el-divider>
          <el-button type="text" icon="el-icon-plus" @click="$router.push('/AddVote')">
            发起投票
          </el-button>
          <el-button type="text" icon="el-icon-s-ticket" @click="$router.push('/MyVote')">
            我发起的
          </el-button>
          <el-button type="text" icon="el-icon-picture-outline-round" @click="$router.push('/MyJoin')">
            我参与的
          </el-button>
          <el-divider>
            <span style="color:#cdcdcd;font-size:12px">动态管理</span>
          </el-divider>
          <el-button type="text" icon="el-icon-plus" @click="$router.push('/AddPost')">
            添加动态
          </el-button>
          <el-button icon="el-icon-s-comment" type="text" @click="$router.push('/MyPost')">
            我发布的
          </el-button>
          <el-divider>
            <span style="color:#cdcdcd;font-size:12px" />
          </el-divider>
          <!-- <el-button icon="el-icon-wallet" type="text" @click="$router.push('/AddApply')">
            申请成为管理员
          </el-button> -->
          <!-- <el-divider>
            <span style="color:#cdcdcd;font-size:12px" />
          </el-divider> -->
          <el-button icon="el-icon-arrow-left" type="text" @click="logout">
            退出登录
          </el-button>
        </div>
      </div>
      <div v-if="!userInfo" class="info">
        <el-link href="#/login" style="color:#409EFF;">请先登录</el-link>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Info',
  data() {
    return {

    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user.user
    }
  },

  created() {

  },

  methods: {
    logout() {
      this.$store.dispatch('user/logout')
      localStorage.removeItem('userInfo')
      this.$router.push(`/`)
    }
  }
}
</script>

<style lang="scss" scoped>
.info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.username{
  color:#333;
  margin-top: 16px;
}
</style>
